<template>
  <div class="dashboard-container">
    首页123
    <button @click="btn">点击我获取数据</button>

    <h3>动画</h3>
    <button @click="show = !show">点击出现动画</button>

    <transition name="fade">
      <div v-if="show" class="box">我是动画盒子</div>
    </transition>
  </div>
</template>

<script>
import { demoAPI } from '@/api/demo'
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    async btn () {
      let res = await demoAPI({ mobile: '13800000002', password: '123456' })
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
  background-color: pink;
}

.fade-enter {
  transform: translateX(-500px);
}

.fade-enter-active {
  transition: all 6s;
}

.fade-leave-active {
  transition: all 8s;

}

.fade-leave-to {
  transform: translateY(300px);
  width: 100px;
}
</style>
